<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<div class="divclass">
			<p id="onep"><span>这是第一个p元素</span></p>			
			<p>
				<span>这是第二个p元素</span>
			</p>
		</div>
		<div class="divclass"  name="divclasstwo">
			<h1>这是一号标题</h1>
			<h2>这是二号标题</h2>
			<h3>这是三号标题</h3>
		</div>
		<div name="divname"></div>
		
	</body>
	<script type="text/javascript">
		//获取文档节点的方法
		//通过id获取唯一的节点
		var onep=document.getElementById("onep"); //返回对象,由于p是一个段落，所以返回的是段落对象
		console.log("onep="+onep);
		//通过类名获取同一个类名的多个节点
		var oneclassdiv=document.getElementsByClassName("divclass")//返回一个htmlcollection对象
		console.log("oneclassdiv="+oneclassdiv);
		//通过标签名获取同一个标签名的多个节点
		var divnode=document.getElementsByTagName("div");//返回一个htmlcollection对象
		console.log("divnode="+divnode);
		//通过名字获取相同名字的多个节点
		var divnamenode=document.getElementsByName("divname");//返回一个NodeList对象
		console.log("divnamenode="+divnamenode);
		console.log("_______________________");
		
		
		
		
		//元素对象的属性
		var childelementnum=onep.childElementCount;//节点的元素数量
		var childnode=onep.childNodes;//返回子节点NodeList 对象
		var child=onep.children;  //它的所有的儿子,为HTMLCollection 对象
		var onepfirstchild=onep.firstChild; //第一个子节点
		var onepfirstelementchild=onep.firstElementChild  //第一个子元素
		var oneplastchild=onep.lastChild;  //最后子节点
		var oneplastelementchild=onep.lastElementChild;  //最后一个子元素
		var onepinnerhtml=onep.innerHTML;  //onep里面的html元素
		var onepouthtml=onep.outerHTML ; //当前对象整个html 
		var onepinnertext=onep.innerText; //当前对象内的文本
		var oneptextcontent=onep.textContent;//当前对象内的文本
		var onepnextsibling=onep.nextSibling;  //当前对象的下一个同级节点
		var onepnextelementsibling=onep.nextElementSibling; //当前对象的下一个同级元素
		var onepprevioussibling=onep.previousSibling  //当前节点的上一个节点
		var onepprevioussiblingelement=onep.previousElementSibling //当前节点的上一个元素节点
		var onepisconnected=onep.isConnected ;  //判断onep是否在文档数内
		var newtextnode=document.createTextNode("hao");
		var newtextnodeisconnected=newtextnode.isConnected;  //判断onep是不是在文档内
		var onepcontainsspan=onep.contains(onepfirstchild);  //判断onep是不是包含第一个子节点
		var onepcontainspanelement=onep.contains(onepfirstelementchild);  //判断onep是不是包含第一个子元素
		var issamenode=onep.isSameNode(onep);  //判断是不是同一个节点
		var isequalnode=onep.isEqualNode(onep);  //判断两个节点是不是一样
		var isequalnode=onep.isEqualNode(onepfirstchild);  
		onep.removeChild(onepfirstchild);    //移除第一个子节点
		
		
		
		//HTMLCollection对象父节点内的属性
		var oneclassdivlength=oneclassdiv.length; //获取它的长度
		console.log("oneclassdivlength="+oneclassdivlength);
		var oneclassdivfirstchild=oneclassdiv.item(0);//获取第一个元素对象
		console.log("oneclassdivfirstchild="+oneclassdivfirstchild);
		var oneclassdivfirstchildtwo=oneclassdiv[0];//获取第一个元素对象
		console.log("oneclassdivfirstchildtwo="+oneclassdivfirstchildtwo);
		var oneclassdivnamedivtwo=oneclassdiv.namedItem("divclasstwo");//获取名称为divclasstwo的对象
		console.log("oneclassdivnamedivtwo="+oneclassdivnamedivtwo);
		
		//nodelist对象
		var divnamenodelength=divnamenode.length; //获取nodelist对象的长度
		console.log("divnamenodelength="+divnamenodelength);
		for(var key of divnamenode.keys()) { 
			   console.log(key); //遍历nodelist对象的key
		}
		for(var value of divnamenode.values()) { 
			   console.log(value); //遍历nodelist对象的value
		}
		var divnamenodeentitise=divnamenode.entries();
		divnamenode.forEach(function (currentvalue,currentindex,currentobj) {
			console.log("currentvalue="+currentvalue);
			console.log("currentindex="+currentindex);
			console.log("currentobj="+currentobj);
		});//遍历nodelist对象的entries
		var divnamenodefirstobj=divnamenode[0];//获取第一个元素
		var divnamenodefirstobjtwo=divnamenode.item(0);//获取第一个元素
		
		
		
		
		//父元素添加子节点
		var addpnode=document.createElement("span");//创建元素节点
		var addtextnode=document.createTextNode("这是第二个span");//创建文本节点
		addpnode.appendChild(addtextnode);//元素节点里面添加文本节点
		onep.appendChild(addpnode);//添加子节点
		
		
		
		
		
		
		

	</script>
</html>